<template>
  <div class="field-condition-container">
    <div v-if="query.length === 0">
      <t-button theme="primary" @click="add()">新增</t-button>
    </div>
    <div v-for="(_item, idx) in query" :key="_item.id" style="margin-bottom: 10px">
      <field-condition-item
        v-model="query[idx]"
        :index="idx"
        :tab="tab"
        @add="add"
        @remove="remove"
        @edit-text-area="editTextArea"
      />
    </div>
    <a-modal
      v-model:visible="condition.dialog"
      title="请输入terms条件"
      render-to-body
      unmount-on-close
      draggable
      :mask-closable="false"
      :footer="false"
    >
      <monaco-editor v-model="query[condition.index].value" language="json" height="200px" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import FieldConditionItem from "./item.vue";
import MonacoEditor from "@/components/monaco-editor/index.vue";
import { BaseSearchInstanceResult } from "@/hooks";

const props = defineProps({
  tab: {
    type: Object as PropType<BaseSearchInstanceResult>,
    required: true
  }
});

const { query } = props.tab;

const condition = ref({
  dialog: false,
  index: 0
});

function add() {
  query.value.push({
    id: new Date().getTime(),
    type: "must",
    field: "",
    condition: "term",
    value: "",
    isEnable: true
  });
}

function remove(id: number) {
  if (query.value.length === 0) {
    return;
  }
  query.value.splice(
    query.value.findIndex((item) => item.id === id),
    1
  );
}

function editTextArea(index: number) {
  condition.value.dialog = true;
  condition.value.index = index;
}
</script>
<style scoped>
.field-condition-container {
  display: block;
}
</style>
